---
id: 6153908a366afb4d57185c8d
title: Schritt 15
challengeType: 0
dashedName: step-15
---

# --description--

Flexbox hat eine Haupt- und Querachse. Die Hauptachse wird durch die `flex-direction`-Eigenschaft definiert, die vier mögliche Werte hat:

- `row` (Standard): horizontale Achse mit Flex-Elementen von links nach rechts
- `row-reverse`: horizontale Achse mit Flex-Elementen von rechts nach links
- `column`: vertikale Achse mit Flex-Elementen von oben nach unten
- `column-reverse`: vertikale Achse mit Flex-Elementen von unten nach oben

**Note**: Die Achsen und Richtungen unterscheiden sich je nach Textrichtung. Die angegebenen Werte sind für eine Textrichtung von links nach rechts bestimmt.

Teste verschiedene Werte, um zu sehen, wie sie das Layout beeinflussen.

Sobald du fertig bist, weise dem `.gallery`-Element eine explizite `flex-direction` mit dem Wert `row` zu.

# --hints--

Dein `.gallery`-Selektor sollte eine `flex-direction`-Eigenschaft auf `row` als Wert gesetzt haben.

```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>
```

```css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

--fcc-editable-region--
.gallery {
  display: flex;
}
--fcc-editable-region--

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
}
```
